<template>
  <view class="content">
    <view class="date-row">
      <view
        class="date-information"
        v-for="(item, index) in date"
        :key="item.id"
      >
        <text>{{ item.day }}</text>
        <view
          class="date"
          @tap="chooseDate(index)"
          :style="current == index ? 'background:#F4333C' : 'background:#fff'"
        >
          <text
            :style="
              current == index
                ? 'color:#fff'
                : item.active
                ? 'color:#F4333C'
                : 'color:#999999'
            "
            >{{ item.date }}</text
          >
          <text :style="current == index ? 'color:#fff' : 'color:#999999'">{{
            date[index].ticket > 0 ? "有" : "无"
          }}</text>
        </view>
      </view>
    </view>
    <view class="doctor-information">
      <view
        class="card-doctor"
        v-for="item in doctorList"
        :key="item.expertVO.id"
        @tap="goDoctor(item)"
      >
        <view class="top-information">
          <view class="head-img">
            <img :src="item.expertVO.face" alt="" />
          </view>
          <view class="right-information">
            <view class="remaining-num">
              <text>{{ item.expertVO.realName }}</text>
              <text>余号:{{ item.remainder }}</text>
            </view>
            <view class="good-at">
              <text>擅长:</text>
              <text>{{ item.expertVO.domain }}</text>
            </view>
            <view class="price-comments">
              <view class="price">
                <text>￥</text>
                <text>{{ item.registerPrice ? item.registerPrice : 0 }}</text>
              </view>
              <view class="comments">
                <image
                  class="img"
                  src="@/static/img/registered/collect.png"
                ></image>
                <text>{{
                  item.expertVO.scoreAvg
                    ? item.expertVO.scoreAvg.toFixed(1)
                    : "0.0"
                }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="to-btn-row">
          <u-button
            type="default"
            shape="circle"
            class="to-btn"
            hover-class="none"
            @tap="goRegistered(item)"
            >前往预约</u-button
          >
        </view>
      </view>
      <view v-if="!doctorList.length" class="kong">
        <u-empty text="内容为空" mode="list"></u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import { API } from "../../config/myApi.js";
export default {
  data() {
    return {
      //场地id
      id: null,
      //当前tab
      current: 0,
      //传给后端数据
      params: null,
      week: "",
      //日期
      date: [],
      //专家列表
      doctorList: [],
      siteDate: [],
      // 根据日期获取专家列表
      doctorByTime: [],
      siteAddress: "",
      siteName: "",
    };
  },
  onLoad(data) {
    this.id = data.id;
    this.siteAddress = data.siteAddress;
    this.siteName = data.siteName;
    this.getDate(this.id);
    console.log(this.id);
    this.getExpertSiteIsAppoint(data);
    this.getDoctor();
  },
  methods: {
    //分时段获取专家列表
    getDoctor() {
      const pram = {
        ...this.params,
      };
      console.log("后端dsdsds数据", this.params);
      API.getAllTimePeriodsBySiteId(this.params).then((res) => {
        if (res.code) {
          if (res.code == 200) {
            this.doctorList = res.result;
            console.log("doctorList", this.doctorList);
          }
        }
      });
    },
    // 分时段获取专家列表
    // getDoctorByTime(){
    // 	const pram = {
    // 		...this.params
    // 	}
    // 	API.getdifferTimePeriodsBySiteIdAsync({rows:5,page:1}).then((res) => {
    // 		console.log("1231123",this.params);
    // 		if(res.code){
    // 			if(res.code == 200){
    // 				this.doctorByTime = res.result;
    // 				console.log("时段获取",doctorByTime);
    // 			}
    // 		}
    // 	})
    // },

    //获取场地日期
    // getSiteDate(data){
    // 	console.log(222,data);
    // 	API.getSiteDate(data).then((res) => {
    // 		if(res.code){
    // 			if(res.code == 200){
    // 				console.log(1111,res);
    // 				this.siteDate = res.result;
    // 			}
    // 		}
    // 	})
    // },
    // 去专家页
    goDoctor(v) {
      console.log(v);
      uni.navigateTo({
        url:
          "/pages/doctor/doctorIndex?doctorId=" +
          v.expertId +
          "&siteName=" +
          this.siteName +
          "&siteId=" +
          this.id,
      });
    },
    //切换日期
    chooseDate(index) {
      this.current = index;
      this.params = { week: this.date[index].num, siteId: this.id };
      console.log(this.params);
      this.getDoctor();
    },
    // 查询场地是否可以预约
    getExpertSiteIsAppoint(id) {
      // this.getDate();
      const pram = {
        id: id,
      };
      API.getExpertSiteIsAppoint(pram.id).then((res) => {
        // console.log("res弟弟", res);
        if (res.code == 200) {
          let arr = res.result;
          this.getDate(arr);
          // for (let key in res.result) {
          //   console.log("shsdhjag", res.result[key]);
          // }
        }
      });
    },
    //生成日期
    getDate(arr) {
      let time = Date.now();
      let dayTime = 24 * 60 * 60 * 1000;
      let dateArr = [];
      let ticketArr = [];
      for (let key in arr) {
        ticketArr.push(arr[key]);
      }
      console.log(ticketArr);
      for (let i = 0; i < 7; i++) {
        const dateInformation = new Date(time + i * dayTime);
        const day = dateInformation.getDay();
        const date = dateInformation.getDate();
        if (day == 1) {
          dateArr.push({ num: 1, day: "周一", date: date, ticket: ticketArr[i] });
        } else if (day == 2) {
          dateArr.push({ num: 2, day: "周二", date: date, ticket: ticketArr[i] });
        } else if (day == 3) {
          dateArr.push({ num: 3, day: "周三", date: date, ticket: ticketArr[i] });
        } else if (day == 4) {
          dateArr.push({ num: 4, day: "周四", date: date, ticket: ticketArr[i] });
        } else if (day == 5) {
          dateArr.push({ num: 5, day: "周五", date: date, ticket: ticketArr[i] });
        } else if (day == 6) {
          dateArr.push({ num: 6, day: "周六", date: date, ticket: ticketArr[i] });
        } else if (day == 0) {
          dateArr.push({ num: 7, day: "周日", date: date, ticket: ticketArr[i] });
        }
      }
      this.date = dateArr;
      this.params = { week: this.date[0].num, siteId: this.id };
    },
    // 前往预约
    goRegistered(item) {
      uni.navigateTo({
        url: `/pages/mine/myRegister/startRegister?expertName=${item.expertVO.realName}&consultPrice=${item.expertVO.consultPrice}&expertId=${item.expertId}&siteId=${this.id}&week=${this.params.week}&price=${item.registerPrice}&siteAddress=${this.siteAddress}&siteName=${this.siteName}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .date-row {
    background: #fff;
    padding: 36rpx 38rpx 25rpx;
    display: flex;
    justify-content: space-between;

    .date-information {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 90rpx;

      > text {
        font-size: 14px;
        color: #666666;
      }

      .date {
        width: 90rpx;
        height: 90rpx;
        border-radius: 45rpx;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 20rpx;

        > text:first-of-type {
          font-size: 14px;
          font-weight: bold;
        }

        > text:last-of-type {
          font-size: 12px;
          font-weight: bold;
        }
      }
    }
  }
  .doctor-information {
    padding: 0rpx 30rpx;
    .card-doctor {
      padding: 24rpx 24rpx 30rpx;
      border-radius: 14rpx;
      display: flex;
      flex-direction: column;
      background: #fff;
      margin-top: 24rpx;
      .top-information {
        display: flex;
        border-bottom: 1rpx solid #e3e3e3;
        padding-bottom: 30rpx;
        .head-img {
          width: 120rpx;
          height: 120rpx;
          border-radius: 60rpx;
          overflow: hidden;
          > img {
            width: 120rpx;
            height: 120rpx;
          }
        }
        .right-information {
          margin-left: 30rpx;
          width: 491rpx;
          .remaining-num {
            display: flex;
            justify-content: space-between;
            margin-top: 4rpx;
            > text:first-of-type {
              font-size: 16px;
            }
            > text:last-of-type {
              font-size: 13px;
            }
          }
          .good-at {
            margin-top: 19rpx;
            > text:first-of-type {
              font-weight: bold;
              font-size: 14px;
            }
            > text:last-of-type {
              font-size: 14px;
            }
          }
          .price-comments {
            display: flex;
            margin-top: 30rpx;
            .price {
              > text:first-of-type {
                font-size: 10px;
                color: #f4333c;
              }
              > text:last-of-type {
                font-size: 14px;
                color: #f4333c;
                font-weight: bold;
              }
            }
            .comments {
              margin-left: 30rpx;
              > .img {
                width: 24rpx;
                height: 23rpx;
              }
              > text {
                font-size: 14px;
                color: #f4333c;
                font-weight: bold;
              }
            }
          }
        }
      }
      .to-btn-row {
        margin-left: auto;
        margin-top: 26rpx;
        .to-btn {
          color: #f4333c;
          width: 160rpx;
          height: 61rpx;
          border: 1rpx solid #f4333c;
        }
        .u-hairline-border:after {
          border: none;
        }
      }
    }
    .kong {
      height: 700rpx;
    }
  }
}
</style>
